<template>
  <view class="wrap">
    <view class="wrap-info align-center">
    	<view class="wrap-info-atv" @click="editAtvName">
    		<up-image src="/static/images/agreeBg.png" :fade="false" width="124rpx" height="124rpx" radius="50%"></up-image>
    	</view>
		<view class="wrap-info-data">
			<view class="wrap-info-data-name" @click="editAtvName">
				微信昵称123
			</view>
			<view class="wrap-info-data-means align-justify-space-between">
				<view class="wrap-info-data-means-progress">
					<up-line-progress :percentage="30" inactiveColor="#fff" activeColor="#FF47AB"></up-line-progress>
				</view>
				<view class="wrap-info-data-means-btn align-center" @click="goInfo">
					立即完善
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
    </view>
	<view class="wrap-data align-justify-space-around">
		<view class="wrap-data-list align-center-flex-column" @click="handleClick('invitationLetter')">
			<up-image src="/static/images/invitation.png" :fade="false" width="44rpx" height="47rpx"></up-image>
			邀请函
		</view>
		<view class="wrap-data-list align-center-flex-column" @click="handleClick('reserved')">
			<up-image src="/static/images/alreadyBooked.png" :fade="false" width="44rpx" height="47rpx"></up-image>
			已预约
		</view>
		<view class="wrap-data-list align-center-flex-column" @click="handleClick('waitingMeet')">
			<up-image src="/static/images/seeYouLater.png" :fade="false" width="45rpx" height="48rpx"></up-image>
			待见面
		</view>
		<view class="wrap-data-list align-center-flex-column" @click="handleClick('haveMet')">
			<up-image src="/static/images/alreadyBooked.png" :fade="false" width="45rpx" height="48rpx"></up-image>
			已见面
		</view>
	</view>
	<view class="wrap-accusation">
		<view class="wrap-accusation-list align-justify-space-between" @click="handleList(0)">
			择偶意向
			<up-icon name="arrow-right"></up-icon>
		</view>
		<view class="wrap-accusation-list align-justify-space-between" @click="handleList(1)">
			资料预览
			<up-icon name="arrow-right"></up-icon>
		</view>
		<view class="wrap-accusation-list align-justify-space-between" @click="handleList(2)">
			设置
			<up-icon name="arrow-right"></up-icon>
		</view>
	</view>
  </view>
</template>

<script setup>
  import { useUserStore } from '@/store'
  import { computed , getCurrentInstance } from "vue"
  
  const editAtvName = () => {
	  uni.navigateTo({
	  	url:'/pages/mine/editAtvName'
	  })
  }
  
  const handleClick = (url) => {
	  uni.navigateTo({
	  	url:`/pages/mine/${url}`
	  })
  }
  
  const goInfo = () => {
	  uni.navigateTo({
	  	url:'/pages/mine/information'
	  })
  }
  
  const handleList = (val) => {
	  if(val == 0){
		  uni.navigateTo({
		  	url:'/pages/mine/mateSelectionIntention'
		  })
	  }else if(val == 1){
		  
	  }else{
		  uni.navigateTo({
		  	url:'/pages/mine/setting'
		  })
	  }
  }

  
</script>

<style lang="scss" scoped>
  .wrap{
	  padding: 60rpx 30rpx 0;
	  box-sizing: border-box;
	  &-accusation {
	  	padding: 40rpx;
	  	box-sizing: border-box;
	  	border-radius: 12rpx 12rpx 12rpx 12rpx;
	  	background-color: #fff;
	  
	  	&-title {
	  		margin-bottom: 40rpx;
	  		font-weight: bold;
	  		font-size: 34rpx;
	  		color: #222222;
	  	}
	  	
	  	&-list{
	  		height: 96rpx;
	  		font-size: 30rpx;
	  		color: #444444;
	  	}
	  }
	  &-data{
		  height: 168rpx;
		  margin: 60rpx 0 30rpx;
		  background-color: #fff;
		  border-radius: 12rpx 12rpx 12rpx 12rpx;
		  &-list{
			  line-height: 60rpx;
			  font-size: 26rpx;
			  color: #444444;
		  }
	  }
	  &-info{
		  &-atv{
			  margin-right: 20rpx;
		  }
		  &-data{
			  flex: 1;
			  &-name{
				  margin-bottom: 20rpx;
				  font-weight: bold;
				  font-size: 34rpx;
				  color: #222222;
			  }
			  &-means{
				  &-progress{
					  flex: 1;
				  }
				  &-btn{
					  margin-left: 80rpx;
					  font-weight: 500;
					  font-size: 22rpx;
					  color: #222222;
				  }
			  }
		  }
	  }
  }
</style>
